<template>
    <div class="row">
        <!-- 菜单 -->
        <div class="col-sm-12 col-md-8">
            <table class="table">
                <thead class="thead-default">
                    <tr>
                        <th>尺寸</th>
                        <th>价格</th>
                        <th>加入</th>
                    </tr>
                </thead>
                <tbody v-for="item in getMenuItems" :key="item.id">
                    <tr>
                        <td><strong>{{item.name}}</strong></td>
                    </tr>
                     <tr v-for="option in JSON.parse(item.options)" :key="option.price">
                        <td>{{option.size}}</td>
                        <td>{{option.price}}</td>
                        <td><button @click="addToBasket(item,option)" class="btn btn-sm btn-outline-success">+</button></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 购物车 -->
        <div class="col-sm-12 col-md-4">
            <div v-if="baskets.length>0">
                <table class="table">
                    <thead class="thead-default">
                        <tr>
                            <th>数量</th>
                            <th>品种</th>
                            <th>价格</th>
                        </tr>
                    </thead>
                    <tbody v-for="item in baskets" :key="item.name">
                        <tr>
                            <td>
                                <button class="btn btn-sm" @click="decreaseQuantity(item)">-</button>
                                <span>{{item.quantity}}</span>
                                <button class="btn btn-sm" @click="increaseQuantity(item)">+</button>
                            </td>
                            <td>{{item.name}}{{item.size}}</td>
                            <td>{{item.price*item.quantity}}</td>
                        </tr>
                    </tbody>
                </table>
                <p>总价：{{total+"RMB"}}</p>
                <button class="btn btn-success btn-block">提交</button>
            </div>
            <div v-else>
                {{basketText}}
            </div>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:[],
            baskets:[],
            basketText:"购物车没有任何商品",
           // getMenuItems:{
                // 1:{
                //     'name':'榴莲pizza',
                //     'description':'这是喜欢吃榴莲朋友的最佳选择',
                //     'option':[{'size':9,'price':38},{'size':12,'price':48}]
                // },
                // 2:{
                //     'name':'芝士pizza',
                //     'description':'芝士杀手,浓浓的芝士丝,食欲瞬间爆棚',
                //     'option':[{'size':9,'price':38},{'size':12,'price':48}]
                // },
                // 3:{
                //     'name':'夏威夷pizza',
                //     'description':'众多人默认的选择',
                //     'option':[{'size':9,'price':36},{'size':12,'price':46}]
                // }

            //}
        }
    },
    computed:{
        getMenuItems(){
            //return this.$store.state.menuItems
            //通过getter获取数据
            return this.$store.getters.getMenuItems
        },
        total(){
            let totalCost=0
            for(let index in this.baskets){
                let individualItem=this.baskets[index]
                totalCost+=individualItem.quantity*individualItem.price
            }
            return totalCost
        }
    },
    methods:{
        addToBasket(item,option){
            let basket={
                name:item.name,
                size:option.size,
                price:option.price,
                quantity:1

            }

            if(this.baskets.length>0){
                //过滤
                let result=this.baskets.filter(basket=>{
                    return (basket.name===item.name && basket.price===option.price)
                })
                console.log(result);
                if(result!=null && result.length>0){
                    result[0].quantity++
                }else{
                    this.baskets.push(basket)
                }
            }else{
                 this.baskets.push(basket)
            }

           
        },

        decreaseQuantity(item){
            item.quantity--
            if(item.quantity<=0){
                this.removeFromBasket(item)
            }
        },
        increaseQuantity(item){
            item.quantity++
        },
        removeFromBasket(item){
            this.baskets.splice(this.baskets.indexOf(item),1)
        }

    },
    created(){
            axios.get('/menu').then(res =>{
                // this.$router.push({name:'menuLink'})
                //console.log(res.data.data);
               this.$store.commit("setMenuItems",res.data.data)
               

              //console.log(this.getMenuItems);
              
        
                
            })
        
        }
}
</script>